<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站商品列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            color: #333;
        }
        
        .section-title {
            text-align: center;
            margin: 2rem 0 3rem;
            color: #2c3e50;
            position: relative;
            padding-bottom: 1rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, #28a745, #218838);
            border-radius: 3px;
        }
        
        .products-container {
            margin-bottom: 4rem;
        }
        
        .layout-type-title {
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #eee;
            color: #34495e;
        }
        
        /* 商品卡片基础样式 */
        .product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.07);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        /* 商品图片样式 */
        .product-image {
            position: relative;
            overflow: hidden;
        }
        
        .product-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .product-card:hover .product-img {
            transform: scale(1.05);
        }
        
        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            color: white;
        }
        
        .badge-new {
            background-color: #28a745;
        }
        
        .badge-sale {
            background-color: #dc3545;
        }
        
        .wishlist-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
        }
        
        .wishlist-btn:hover {
            background-color: #f8f9fa;
            transform: scale(1.1);
        }
        
        /* 卖家信息样式 */
        .seller-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .seller-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .seller-name {
            font-weight: 500;
            color: #495057;
        }
        
        /* 价格样式 */
        .product-price {
            font-weight: 700;
            color: #dc3545;
            font-size: 1.25rem;
            margin: 0.5rem 0;
        }
        
        .original-price {
            text-decoration: line-through;
            color: #6c757d;
            font-size: 0.9rem;
            margin-left: 0.5rem;
            font-weight: normal;
        }
        
        /* 评分样式 */
        .product-rating {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: #ffc107;
            font-size: 0.9rem;
        }
        
        .rating-count {
            color: #6c757d;
            margin-left: 0.5rem;
        }
        
        /* 统计信息样式 */
        .product-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: #6c757d;
            font-size: 0.85rem;
        }
        
        .product-stats span {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        /* 按钮样式 */
        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .action-buttons button {
            transition: all 0.2s ease;
        }
        
        .action-buttons button:hover {
            transform: translateY(-2px);
        }
        
        /* 样式1：网格卡片式 */
        .style-grid .product-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .style-grid .product-image {
            height: 200px;
            flex-shrink: 0;
        }
        
        .style-grid .product-info {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .style-grid .product-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }
        
        .style-grid .product-description {
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 1rem;
            flex-grow: 1;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .style-grid .product-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.75rem;
            border-top: 1px solid #f1f1f1;
        }
        
        /* 样式2：详情展示式 */
        .style-detail .product-card {
            display: flex;
        }
        
        .style-detail .product-image {
            width: 30%;
            min-width: 200px;
            flex-shrink: 0;
        }
        
        .style-detail .product-image .product-img {
            height: 100%;
        }
        
        .style-detail .product-info {
            padding: 1.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .style-detail .product-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.75rem;
            font-size: 1.4rem;
        }
        
        .style-detail .product-description {
            font-size: 1rem;
            color: #495057;
            margin-bottom: 1.25rem;
            line-height: 1.6;
        }
        
        .style-detail .product-meta {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #f1f1f1;
        }
        
        .style-detail .product-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
        }
        
        .style-detail .seller-block {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .style-detail .seller-block .seller-info {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
        }
        
        .style-detail .seller-block .seller-avatar {
            width: 40px;
            height: 40px;
        }
        
        .style-detail .seller-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
        }
        
        /* 样式3：紧凑列表式 */
        .style-compact .product-card {
            display: flex;
            padding: 1rem;
            align-items: center;
        }
        
        .style-compact .product-image {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            border-radius: 8px;
        }
        
        .style-compact .product-content {
            flex-grow: 1;
            margin-left: 1rem;
        }
        
        .style-compact .product-title {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: #2c3e50;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .style-compact .product-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.85rem;
            color: #6c757d;
            margin-bottom: 0.25rem;
        }
        
        .style-compact .product-actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }
        
        /* 样式4：精选展示式 */
        .style-featured .product-card {
            margin-bottom: 2.5rem;
            overflow: visible;
        }
        
        .style-featured .product-image-container {
            position: relative;
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .style-featured .product-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .style-featured .product-info-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            padding: 2rem;
        }
        
        .style-featured .product-title {
            font-weight: 700;
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }
        
        .style-featured .product-short-desc {
            font-size: 1rem;
            opacity: 0.9;
            margin-bottom: 1rem;
            max-width: 700px;
        }
        
        .style-featured .product-price {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
        }
        
        .style-featured .product-price .original-price {
            color: rgba(255,255,255,0.7);
        }
        
        .style-featured .product-detail {
            padding: 2rem;
            background-color: white;
            border-radius: 10px;
            margin-top: -1rem;
            position: relative;
            z-index: 10;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .style-featured .product-description {
            font-size: 1.05rem;
            color: #495057;
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }
        
        .style-featured .product-specs {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #f1f1f1;
        }
        
        .style-featured .spec-item {
            display: flex;
            flex-direction: column;
        }
        
        .style-featured .spec-label {
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 0.25rem;
        }
        
        .style-featured .spec-value {
            font-weight: 500;
        }
        
        .style-featured .product-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .style-detail .product-description {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
        
        @media (max-width: 768px) {
            .style-detail .product-card {
                flex-direction: column;
            }
            
            .style-detail .product-image {
                width: 100%;
                height: 220px;
            }
            
            .style-featured .product-image-container {
                height: 280px;
            }
            
            .style-featured .product-title {
                font-size: 1.5rem;
            }
            
            .style-grid .product-cover {
                height: 160px;
            }
            
            .style-compact .product-card {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .style-compact .product-image {
                width: 100%;
                height: 180px;
            }
            
            .style-compact .product-content {
                margin-left: 0;
                margin-top: 1rem;
                width: 100%;
            }
            
            .style-compact .product-actions {
                margin-top: 1rem;
                width: 100%;
                justify-content: space-between;
            }
            
            .action-buttons {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="section-title">社交商城商品展示</h1>
        
        <!-- 样式1：网格卡片式 -->
        <div class="products-container style-grid">
            <h3 class="layout-type-title">
                <i class="fas fa-th me-2"></i>网格卡片式商品
            </h3>
            
            <div class="row">
                <!-- 商品1 -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://picsum.photos/id/96/600/600" alt="无线蓝牙耳机" class="product-img">
                            <div class="product-badge badge-sale">促销</div>
                            <div class="wishlist-btn btn-wishlist">
                                <i class="far fa-heart"></i>
                            </div>
                        </div>
                        
                        <div class="product-info">
                            <div class="seller-info">
                                <img src="https://picsum.photos/id/64/100/100" alt="卖家头像" class="seller-avatar">
                                <span>卖家: <span class="seller-name">科技数码店</span></span>
                            </div>
                            
                            <h3 class="product-title">无线蓝牙耳机 主动降噪 长续航</h3>
                            
                            <p class="product-description">
                                新款无线蓝牙耳机，主动降噪功能，高清通话，续航可达30小时，IPX7防水。
                            </p>
                            
                            <div class="product-price">
                                ¥299 <span class="original-price">¥399</span>
                            </div>
                            
                            <div class="product-footer">
                                <div class="product-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span class="rating-count">(128)</span>
                                </div>
                                
                                <div class="action-buttons">
                                    <button class="btn btn-sm btn-primary">
                                        <i class="fas fa-shopping-cart"></i> 加入购物车
                                    </button>
                                    <button class="btn btn-sm btn-success">
                                        <i class="fas fa-tag"></i> 购买
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品2 -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://picsum.photos/id/26/600/600" alt="纯棉T恤" class="product-img">
                            <div class="product-badge badge-new">新品</div>
                            <div class="wishlist-btn btn-wishlist">
                                <i class="far fa-heart"></i>
                            </div>
                        </div>
                        
                        <div class="product-info">
                            <div class="seller-info">
                                <img src="https://picsum.photos/id/26/100/100" alt="卖家头像" class="seller-avatar">
                                <span>卖家: <span class="seller-name">时尚衣橱</span></span>
                            </div>
                            
                            <h3 class="product-title">夏季纯棉宽松T恤 男女同款</h3>
                            
                            <p class="product-description">
                                100%纯棉材质，透气舒适，多种颜色可选，宽松版型，适合夏季穿着。
                            </p>
                            
                            <div class="product-price">
                                ¥89
                            </div>
                            
                            <div class="product-footer">
                                <div class="product-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                    <span class="rating-count">(95)</span>
                                </div>
                                
                                <div class="action-buttons">
                                    <button class="btn btn-sm btn-primary">
                                        <i class="fas fa-shopping-cart"></i> 加入购物车
                                    </button>
                                    <button class="btn btn-sm btn-success">
                                        <i class="fas fa-tag"></i> 购买
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品3 -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://picsum.photos/id/292/600/600" alt="手工蛋糕" class="product-img">
                            <div class="wishlist-btn btn-wishlist">
                                <i class="far fa-heart"></i>
                            </div>
                        </div>
                        
                        <div class="product-info">
                            <div class="seller-info">
                                <img src="https://picsum.photos/id/91/100/100" alt="卖家头像" class="seller-avatar">
                                <span>卖家: <span class="seller-name">甜蜜烘焙坊</span></span>
                            </div>
                            
                            <h3 class="product-title">手工草莓奶油蛋糕 6寸</h3>
                            
                            <p class="product-description">
                                新鲜草莓制作，动物奶油，松软蛋糕胚，口感细腻，需提前24小时预订。
                            </p>
                            
                            <div class="product-price">
                                ¥168
                            </div>
                            
                            <div class="product-footer">
                                <div class="product-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <span class="rating-count">(217)</span>
                                </div>
                                
                                <div class="action-buttons">
                                    <button class="btn btn-sm btn-primary">
                                        <i class="fas fa-shopping-cart"></i> 加入购物车
                                    </button>
                                    <button class="btn btn-sm btn-success">
                                        <i class="fas fa-tag"></i> 购买
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品4 -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://picsum.photos/id/1060/600/600" alt="多肉植物组合" class="product-img">
                            <div class="product-badge badge-sale">特价</div>
                            <div class="wishlist-btn btn-wishlist">
                                <i class="far fa-heart"></i>
                            </div>
                        </div>
                        
                        <div class="product-info">
                            <div class="seller-info">
                                <img src="https://picsum.photos/id/342/100/100" alt="卖家头像" class="seller-avatar">
                                <span>卖家: <span class="seller-name">绿意植物馆</span></span>
                            </div>
                            
                            <h3 class="product-title">多肉植物组合盆栽 含盆</h3>
                            
                            <p class="product-description">
                                精选多肉植物3-5颗，搭配陶瓷花盆，送营养土和养护说明，新手易养。
                            </p>
                            
                            <div class="product-price">
                                ¥39 <span class="original-price">¥59</span>
                            </div>
                            
                            <div class="product-footer">
                                <div class="product-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <i class="far fa-star"></i>
                                    <span class="rating-count">(76)</span>
                                </div>
                                
                                <div class="action-buttons">
                                    <button class="btn btn-sm btn-primary">
                                        <i class="fas fa-shopping-cart"></i> 加入购物车
                                    </button>
                                    <button class="btn btn-sm btn-success">
                                        <i class="fas fa-tag"></i> 购买
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式2：详情展示式 -->
        <div class="products-container style-detail">
            <h3 class="layout-type-title">
                <i class="fas fa-list-alt me-2"></i>详情展示式商品
            </h3>
            
            <!-- 商品1 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/1059/800/800" alt="智能手表" class="product-img">
                    <div class="wishlist-btn btn-wishlist">
                        <i class="far fa-heart"></i>
                    </div>
                </div>
                
                <div class="product-info">
                    <div class="product-title">全智能手表 心率监测 运动计步 长续航</div>
                    
                    <div class="product-price">
                        ¥599 <span class="original-price">¥799</span>
                    </div>
                    
                    <div class="product-rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                        <span class="rating-count">4.5 (246条评价)</span>
                    </div>
                    
                    <div class="product-description">
                        这款全智能手表拥有1.39英寸高清触摸屏，支持24小时心率监测、血氧检测、睡眠分析和多种运动模式。内置GPS，可独立记录运动轨迹。续航可达7-14天，支持快充功能。兼容iOS和Android系统，支持消息推送、来电提醒等功能。IP68级防水，日常游泳也可佩戴。
                    </div>
                    
                    <div class="product-meta">
                        <div class="product-stats">
                            <span><i class="fas fa-shopping-cart"></i> 328人已购</span>
                            <span><i class="fas fa-eye"></i> 1,562 浏览</span>
                            <span><i class="fas fa-truck"></i> 全国包邮</span>
                            <span><i class="fas fa-calendar-check"></i> 7天无理由退换</span>
                        </div>
                    </div>
                    
                    <div class="seller-block">
                        <img src="https://picsum.photos/id/237/100/100" alt="卖家头像" class="seller-avatar">
                        <div class="seller-info">
                            <div>卖家: <span class="seller-name">智能生活旗舰店</span></div>
                            <div class="seller-rating">
                                <div class="product-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <span>4.9 (1200+ 评价)</span>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-user-plus"></i> 关注
                        </button>
                    </div>
                    
                    <div class="product-footer">
                        <div class="action-buttons">
                            <div class="quantity-selector">
                                <button class="btn btn-sm btn-outline-secondary minus-qty">-</button>
                                <input type="number" value="1" min="1" class="form-control form-control-sm quantity-input" style="width: 60px; display: inline-block;">
                                <button class="btn btn-sm btn-outline-secondary plus-qty">+</button>
                            </div>
                            <button class="btn btn-primary">
                                <i class="fas fa-shopping-cart"></i> 加入购物车
                            </button>
                            <button class="btn btn-success">
                                <i class="fas fa-bolt"></i> 立即购买
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式3：紧凑列表式 -->
        <div class="products-container style-compact">
            <h3 class="layout-type-title">
                <i class="fas fa-list me-2"></i>紧凑列表式商品
            </h3>
            
            <!-- 商品1 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/1069/300/300" alt="笔记本电脑包" class="product-img">
                    <div class="wishlist-btn btn-wishlist">
                        <i class="far fa-heart"></i>
                    </div>
                </div>
                
                <div class="product-content">
                    <h3 class="product-title">15.6英寸笔记本电脑包 防水防震 商务通勤</h3>
                    
                    <div class="product-meta">
                        <span>卖家: <span class="seller-name">数码配件馆</span></span>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                            <span class="rating-count">(48)</span>
                        </div>
                    </div>
                    
                    <div class="product-stats">
                        <span><i class="fas fa-shopping-cart"></i> 96人已购</span>
                        <span><i class="fas fa-truck"></i> 包邮</span>
                    </div>
                </div>
                
                <div class="product-actions">
                    <div class="product-price">¥129</div>
                    <button class="btn btn-sm btn-primary">
                        <i class="fas fa-shopping-cart"></i>
                    </button>
                    <button class="btn btn-sm btn-success">
                        购买
                    </button>
                </div>
            </div>
            
            <!-- 商品2 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/1080/300/300" alt="瑜伽垫" class="product-img">
                    <div class="product-badge badge-sale">促销</div>
                    <div class="wishlist-btn btn-wishlist">
                        <i class="far fa-heart"></i>
                    </div>
                </div>
                
                <div class="product-content">
                    <h3 class="product-title">专业瑜伽垫 防滑环保 10mm加厚 多种颜色</h3>
                    
                    <div class="product-meta">
                        <span>卖家: <span class="seller-name">健康运动坊</span></span>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span class="rating-count">(124)</span>
                        </div>
                    </div>
                    
                    <div class="product-stats">
                        <span><i class="fas fa-shopping-cart"></i> 215人已购</span>
                        <span><i class="fas fa-truck"></i> 满59元包邮</span>
                    </div>
                </div>
                
                <div class="product-actions">
                    <div class="product-price">¥49 <span class="original-price">¥79</span></div>
                    <button class="btn btn-sm btn-primary">
                        <i class="fas fa-shopping-cart"></i>
                    </button>
                    <button class="btn btn-sm btn-success">
                        购买
                    </button>
                </div>
            </div>
            
            <!-- 商品3 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/1082/300/300" alt="马克杯" class="product-img">
                    <div class="product-badge badge-new">新品</div>
                    <div class="wishlist-btn btn-wishlist">
                        <i class="far fa-heart"></i>
                    </div>
                </div>
                
                <div class="product-content">
                    <h3 class="product-title">创意个性马克杯 带盖勺 陶瓷水杯 可定制</h3>
                    
                    <div class="product-meta">
                        <span>卖家: <span class="seller-name">生活创意馆</span></span>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <span class="rating-count">(87)</span>
                        </div>
                    </div>
                    
                    <div class="product-stats">
                        <span><i class="fas fa-shopping-cart"></i> 156人已购</span>
                        <span><i class="fas fa-truck"></i> 满39元包邮</span>
                    </div>
                </div>
                
                <div class="product-actions">
                    <div class="product-price">¥35</div>
                    <button class="btn btn-sm btn-primary">
                        <i class="fas fa-shopping-cart"></i>
                    </button>
                    <button class="btn btn-sm btn-success">
                        购买
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 样式4：精选展示式 -->
        <div class="products-container style-featured">
            <h3 class="layout-type-title">
                <i class="fas fa-star me-2"></i>精选展示式商品
            </h3>
            
            <!-- 精选商品 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://picsum.photos/id/1067/1200/800" alt="便携式咖啡机" class="product-img">
                    <div class="wishlist-btn btn-wishlist" style="background-color: rgba(255,255,255,0.9);">
                        <i class="far fa-heart"></i>
                    </div>
                    
                    <div class="product-info-overlay">
                        <h3 class="product-title">便携式意式浓缩咖啡机 家用迷你型</h3>
                        <p class="product-short-desc">
                            小型家用咖啡机，一键操作，轻松制作意式浓缩咖啡，适合咖啡爱好者。
                        </p>
                        <div class="product-price">
                            ¥699 <span class="original-price">¥999</span>
                        </div>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span class="rating-count" style="color: rgba(255,255,255,0.8);">4.7 (326条评价)</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-detail">
                    <p class="product-description">
                        这款便携式意式浓缩咖啡机让您在家也能享受到专业级别的咖啡。采用15 Bar泵压技术，能够充分萃取咖啡精华，释放浓郁香气。紧凑设计不占空间，适合家庭和办公室使用。配备可拆洗水箱和废水盒，清洁方便。支持使用咖啡粉或咖啡胶囊，满足不同需求。加热迅速，开机后30秒即可制作咖啡。
                    </p>
                    
                    <div class="product-specs">
                        <div class="spec-item">
                            <span class="spec-label">品牌</span>
                            <span class="spec-value">CaféPlus</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">颜色</span>
                            <span class="spec-value">黑色/白色/红色</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">功率</span>
                            <span class="spec-value">800W</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">水箱容量</span>
                            <span class="spec-value">0.6L</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">尺寸</span>
                            <span class="spec-value">23x15x30cm</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">保修期</span>
                            <span class="spec-value">2年</span>
                        </div>
                    </div>
                    
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <div class="seller-block">
                            <img src="https://picsum.photos/id/399/100/100" alt="卖家头像" class="seller-avatar">
                            <div class="seller-info">
                                <div>卖家: <span class="seller-name">咖啡生活旗舰店</span></div>
                                <div class="seller-rating">
                                    <div class="product-rating">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <span>4.9 (2500+ 评价)</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="product-stats">
                            <span><i class="fas fa-shopping-cart"></i> 528人已购</span>
                            <span><i class="fas fa-eye"></i> 3,246 浏览</span>
                            <span><i class="fas fa-truck"></i> 全国顺丰包邮</span>
                            <span><i class="fas fa-calendar-check"></i> 30天无理由退换</span>
                        </div>
                        
                        <div class="product-actions">
                            <div class="quantity-selector">
                                <button class="btn btn-outline-secondary minus-qty">-</button>
                                <input type="number" value="1" min="1" class="form-control quantity-input" style="width: 60px; display: inline-block;">
                                <button class="btn btn-outline-secondary plus-qty">+</button>
                            </div>
                            <button class="btn btn-lg btn-primary">
                                <i class="fas fa-shopping-cart"></i> 加入购物车
                            </button>
                            <button class="btn btn-lg btn-success">
                                <i class="fas fa-bolt"></i> 立即购买
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后初始化交互功能
        document.addEventListener('DOMContentLoaded', function() {
            // 处理收藏按钮交互
            const wishlistButtons = document.querySelectorAll('.btn-wishlist');
            wishlistButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    
                    // 切换图标
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        icon.style.color = '#dc3545';
                        this.style.backgroundColor = 'rgba(220, 53, 69, 0.1)';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        icon.style.color = '';
                        if (this.style.backgroundColor === 'rgba(220, 53, 69, 0.1)') {
                            this.style.backgroundColor = '';
                        }
                    }
                });
            });
            
            // 处理数量选择器
            const minusButtons = document.querySelectorAll('.minus-qty');
            const plusButtons = document.querySelectorAll('.plus-qty');
            
            minusButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const input = this.nextElementSibling;
                    let value = parseInt(input.value);
                    if (value > 1) {
                        input.value = value - 1;
                    }
                });
            });
            
            plusButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const input = this.previousElementSibling;
                    let value = parseInt(input.value);
                    input.value = value + 1;
                });
            });
            
            // 处理加入购物车按钮
            const cartButtons = document.querySelectorAll('button:has(.fas.fa-shopping-cart)');
            cartButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.product-card');
                    const title = card.querySelector('.product-title').textContent;
                    
                    // 获取数量
                    let quantity = 1;
                    const qtyInput = card.querySelector('.quantity-input');
                    if (qtyInput) {
                        quantity = parseInt(qtyInput.value);
                    }
                    
                    alert(`已将 ${quantity} 件【${title}】加入购物车`);
                });
            });
            
            // 处理购买按钮
            const buyButtons = document.querySelectorAll('button:has(.fas.fa-tag), button:has(.fas.fa-bolt), button:contains("购买")');
            buyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.product-card');
                    const title = card.querySelector('.product-title').textContent;
                    
                    // 获取数量
                    let quantity = 1;
                    const qtyInput = card.querySelector('.quantity-input');
                    if (qtyInput) {
                        quantity = parseInt(qtyInput.value);
                    }
                    
                    alert(`正在购买 ${quantity} 件【${title}】，即将跳转到结算页面`);
                });
            });
            
            // 处理关注卖家按钮
            const followButtons = document.querySelectorAll('button:has(.fas.fa-user-plus)');
            followButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const sellerName = this.closest('.seller-block').querySelector('.seller-name').textContent;
                    
                    if (this.innerHTML.includes('关注')) {
                        this.innerHTML = '<i class="fas fa-check"></i> 已关注';
                        this.classList.remove('btn-outline-secondary');
                        this.classList.add('btn-secondary');
                        alert(`已关注卖家【${sellerName}】`);
                    } else {
                        this.innerHTML = '<i class="fas fa-user-plus"></i> 关注';
                        this.classList.remove('btn-secondary');
                        this.classList.add('btn-outline-secondary');
                        alert(`已取消关注卖家【${sellerName}】`);
                    }
                });
            });
        });
    </script>
</body>
</html>
    

